

import { useEffect, useState } from 'react'
import { Input, Select, Table, Tag, Space, Form, Button } from 'antd';
import { useSelector, useDispatch, ProdTagModelState, Link } from "umi";
import styles from './index.less'
import {
  AppstoreOutlined,
  DeleteOutlined,
  EditOutlined,
  SearchOutlined,
  SyncOutlined
} from '@ant-design/icons';
const hotSearch = () => {
  const prodTagList = useSelector((state: { ProdTagList: ProdTagModelState }) => state.ProdTagList);
  const dispatch = useDispatch()
  console.log(prodTagList, '页面');

  const { Option } = Select;
  useEffect(() => {
    // dispatch({
    //   type: 'prod-prodTag/getProdTagList'
    // })
  }, [])

  const [isFlag, setIsFlag] = useState(true);

  function changeFlag() {
    console.log(123);
    setIsFlag(!isFlag)
    console.log(isFlag);
  }
  function refresh() {
    console.log('请求数据');

  }
  const columns = [
    {
      title: '角色名称',
      dataIndex: 'name',
      key: 'name',
      render: (text: any) => <a>{text}</a>,
    },
    {
      title: '备注',
      dataIndex: 'path',
      key: 'path',
    },
    {
      title: '创建时间',
      dataIndex: 'order',
      key: 'order',
    },
    {
      title: '操作',
      key: 'action',
      render: (text: any, record: any) => (

        <Space size="middle" className={styles.actionStyle}>

          <Button style={styles.edit} icon={<EditOutlined />} type='primary'>编辑</Button>
          <Button icon={<DeleteOutlined />} className={styles.delStyle}>删除</Button>

        </Space>
      ),
    },
  ];
  const data = [
    {
      key: '1',
      name: '1',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
      sort: '123'
    },
    {
      key: '2',
      name: '2',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
      sort: '123'
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
      sort: '123'
    },
  ];

  return (
    <div className={styles.prodTag}>
      <div className={isFlag === true ? styles.serach : styles.serachNull}>
        <div className={styles.serachName}>
          <span>热搜标签</span><Input placeholder="标签名称" />
        </div>
        <div className={styles.serachName}>
          <span>热搜内容</span><Input placeholder="标签内容" />
        </div>
        <div className={styles.serachStatus}>
          <span className={styles.spans}>启用状态</span>
          <Form.Item style={{ width: '200px' }}>
            <Select
              placeholder="启用状态"
              allowClear
            >
              <Option value="male">未启用</Option>
              <Option value="female">已启用</Option>
            </Select>
          </Form.Item>
        </div>
        <div className={styles.serachitem}>
          <SearchOutlined />
          <span>&nbsp;搜 索</span>
        </div>
        <div className={styles.empty}>
          <DeleteOutlined />
          <span>&nbsp;清 空</span>
        </div>
      </div>
      <div className={styles.add}>
        <button><i>+</i> 新增</button>
        <Button disabled>批量删除</Button>
        <div className={styles.icons}>
          <div onClick={refresh}><SyncOutlined /></div>
          <div><AppstoreOutlined /></div>
          <div onClick={changeFlag}><SearchOutlined /></div>
        </div>

      </div>
      <div className={styles.from}>
        <Table columns={columns} dataSource={data} />
      </div>
    </div>
  );
}
export default hotSearch